<template>
	<view>
		<scroll-view scroll-y class="scrollPage">
		  <view class="UCenter-bg">
			<view class="cu-avatar xl round" :style="headerStyle">
				<view class="cu-tag badge " :class="headerSexStyle"></view>
			</view>
		    <view class="text-xl">福顺达智慧体育
				<text class="text-df"></text>
		    </view>
			<view class="margin-top-sm">
				<button v-if="!isLogin" class="cu-btn round bg-blue" open-type='getUserInfo' @getuserinfo="bindGetUserInfo">点击登录</button>
				<text v-if="isLogin">{{nickName}}</text>
			</view>
		    <image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-wave"></image>
		  </view>
		  <view class="padding flex text-center text-grey bg-white shadow-warp">
		    <view class="flex flex-sub flex-direction solid-right">
		      <view class="text-xxl text-orange">0</view>
		      <view class="margin-top-sm">
		        <text class="cuIcon-ticket"></text> 我的预约</view>
		    </view>
		    <view class="flex flex-sub flex-direction solid-right">
		      <view class="text-xxl text-blue">{{todayStep}}</view>
		      <view class="margin-top-sm">
		        <text class="cuIcon-footprint"></text> 今日步数</view>
		    </view>
		    <view class="flex flex-sub flex-direction">
		      <view class="text-xxl text-green">0</view>
		      <view class="margin-top-sm">
		        <text class="cuIcon-locationfill"></text> 运动里程</view>
		    </view>
		  </view>
		  
		  <view class="cu-list menu card-menu margin-top">
			<view class="cu-item arrow" @click="toYyList">
				<view class="content">
					<text class="cuIcon-ticket text-green"></text>
					<text class="text-grey">我的预约</text>
			  	</view>
			</view>
			  
			<view class="cu-item arrow" @click="toSportList">
			  	<view class="content">
			  		<text class="cuIcon-footprint text-green"></text>
			  		<text class="text-grey">我的运动</text>
				</view>
			</view>
			  
		  	<view class="cu-item arrow" @tap="clearData">
		  		<view class="content">
		  			<text class="cuIcon-delete text-green"></text>
		  			<text class="text-grey">清除缓存</text>
		  		</view>
		  	</view>
		  	<view v-if="isLogin" class="cu-item arrow" @tap="loginOut">
		  		<view class="content">
		  			<text class="cuIcon-exit text-red"></text>
		  			<text class="text-grey">退出登录</text>
		  		</view>
		  	</view>
		  	<view class="cu-item arrow" @click="toAbout">
		  		<view class="content">
		  			<text class="cuIcon-infofill text-orange"></text>
		  			<text class="text-grey">关于我们</text>
		  		</view>
		  	</view>
		  </view>
		  <view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headerStyle: '',
				headerSexStyle: '',
				nickName: '',
				isLogin: false,
				todayStep:0
			};
		},
		onLoad() {
			
		},
		onShow() {
			var me = this;
			me.initView();
		},
		methods: {
			//授权监听
			bindGetUserInfo: function(e) {
				console.log("进入了授权监听");
				var me = this;
				if (e.detail.userInfo){
					console.log("您同意了授权");
					me.oauth();
					me.getTodayStep();
				} else {
					console.log("您拒绝了授权");
				}
			},
			
			initView(){
				var me = this;
				// 查看是否授权
				uni.getSetting({
					success: function(res){
						if (res.authSetting['scope.userInfo']) {
							console.log("已授权");
							uni.getUserInfo({
								success: function(res) {
									me.nickName = "欢迎您：" +  res.userInfo.nickName;
									me.headerStyle = "background-image:url("+ res.userInfo.avatarUrl +");";
									if(res.userInfo.gender == 2){
										me.headerSexStyle = "cuIcon-female bg-pink";
									}else if(res.userInfo.gender == 1){
										me.headerSexStyle = "cuIcon-male bg-blue";
									}
									me.isLogin = true;
									me.getTodayStep();
									uni.setStorageSync('user', res.userInfo);
								}
							});
						}else{
							console.log("未授权");
							me.headerStyle = "background-image:url(https://zhhq.lzfsd.com/images/zhty/head.jpg);";
							uni.setStorageSync('user', "");
						}
					}
				});
			},
			
			//获取今日步数
			getTodayStep(){
				var me = this;
				uni.login({
					provider: 'weixin',
					success: (res) => {
						var wechatCode = res.code;
						uni.request({
							url: me.FSDCONSTANT.httpUrl + '/zhty/api/console/getOpenId.htm?code=' + wechatCode,
							method:'GET',
							success: (requestRes) => {
								wx.getWeRunData({
									success(runRes){
										uni.request({
											url: me.FSDCONSTANT.httpUrl + '/zhty/api/console/decrypt.htm',
											method:'GET',
											data: {
												openid: requestRes.data.value.openid,
												session_key: requestRes.data.value.session_key,
												encryptedData: runRes.encryptedData,
												iv: runRes.iv
											},
											success: (requestRes1) => {
												if(requestRes1.data.value != null && requestRes1.data.value.length == 31){
													var todayStep = requestRes1.data.value[30];
													let i = 0;
													
													numDH();
													//这里是为了实现数字的动态变化效果
													function numDH() {
													  if (i < 20) {
														setTimeout(function () {
														  me.todayStep = i;
														  i++;
														  numDH();
														}, 20)
													  } else {
														me.todayStep = todayStep.step;
													  }
													}
												}
											},
											fail: (res) => {
												uni.showModal({
													title: '提示',
													content: '网络错误',
													showCancel:false,
													success: function (res) {
													}
												});
											},
											complete: (res) => {
												
											}
										});
									},fail(){
										console.log("fail");
									},complete(){
										
									}
								});
								
							},
							fail: (res) => {
								uni.showModal({
									title: '提示',
									content: '网络错误',
									showCancel:false,
									success: function (res) {
									}
								});
							},
							complete: (res) => {
								
							}
						});
					},
					fail: (err) => {
						console.error('授权登录失败：' + JSON.stringify(err));
					}
				});
			},
			
			//认证
			oauth(){
				var me = this;
				uni.login({
					provider: 'weixin',
					success: (res1) => {
						uni.getUserInfo({
							success: function(res) {
								me.nickName = "欢迎您：" +  res.userInfo.nickName;
								me.headerStyle = "background-image:url("+ res.userInfo.avatarUrl +");";
								if(res.userInfo.gender == 2){
									me.headerSexStyle = "cuIcon-female bg-pink";
								}else if(res.userInfo.gender == 1){
									me.headerSexStyle = "cuIcon-male bg-blue";
								}
								me.isLogin = true;
								uni.setStorageSync('user', res.userInfo);
							}
						});
					},
					fail: (err) => {
						console.error('授权登录失败：' + JSON.stringify(err));
					}
				});
				
				if(me.wechatuser != null){
					me.nickName = "欢迎您：" +  me.wechatuser.nickName;
					me.headerStyle = "background-image:url("+ me.wechatuser.avatarUrl +");";
					if(me.wechatuser.gender == 2){
						me.headerSexStyle = "cuIcon-female bg-pink";
					}else if(me.wechatuser.gender == 1){
						me.headerSexStyle = "cuIcon-male bg-blue";
					}
					me.isLogin = true;
				}
			},
			
			toSportList: function(){
				var me = this;
				if(!me.isLogin){
					uni.showModal({
						title: '提示',
						content: '您未登录',
						showCancel: false,
						confirmColor: '#1AA034',
						success: function (res) {
							if (res.confirm) {
								
							}
						}
					});
				}else{
					uni.navigateTo({
						url: '/pages/sport/list'
					});
				}
			},
			
			toYyList: function(){
				var me = this;
				if(!me.isLogin){
					uni.showModal({
						title: '提示',
						content: '您未登录',
						showCancel: false,
						confirmColor: '#1AA034',
						success: function (res) {
							if (res.confirm) {
								
							}
						}
					});
				}else{
					
				}
			},
			
			toAbout: function(){
				var me = this;
				uni.navigateTo({
					url: '/pages/home/about'
				});
			},
			
			clearData:function(){
				var me = this;
				if(!me.isLogin){
					uni.showModal({
						title: '提示',
						content: '您未登录',
						showCancel: false,
						confirmColor: '#1AA034',
						success: function (res) {
							if (res.confirm) {
								
							}
						}
					});
				}else{
					uni.showModal({
						title: '提示',
						content: '您确定要清理数据吗？',
						confirmColor: '#E0152E',
						cancelColor: "#1AA034",
						success: function (res) {
							if (res.confirm) {
								uni.clearStorage();
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			
			loginOut:function(){
				var me = this;
				uni.showModal({
					title: '提示',
					content: '您确定要退出吗？',
					confirmColor: '#E0152E',
					cancelColor: "#1AA034",
					success: function (res) {
						if (res.confirm) {
							me.loginOutTrue();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			loginOutTrue:function(){
				uni.clearStorage();
				this.isLogin = false;
				this.headerStyle = "background-image:url(https://zhhq.lzfsd.com/images/zhty/head.jpg);";
				this.todayStep = 0;
			}
		}
	}
</script>

<style>
	.UCenter-bg {
	  background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
	  background-size: cover;
	  height: 550rpx;
	  display: flex;
	  justify-content: center;
	  padding-top: 40rpx;
	  overflow: hidden;
	  position: relative;
	  flex-direction: column;
	  align-items: center;
	  color: #fff;
	  font-weight: 300;
	  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}

	.UCenter-bg text {
	  opacity: 0.8;
	}

	.UCenter-bg image {
	  width: 200rpx;
	  height: 200rpx;
	}

	.UCenter-bg .gif-wave{
	  position: absolute;
	  width: 100%;
	  bottom: 0;
	  left: 0;
	  z-index: 99;
	  mix-blend-mode: screen;  
	  height: 100rpx;   
	}

	map,.mapBox{
	  left: 0;
	  z-index: 99;
	  mix-blend-mode: screen;  
	  height: 100rpx;   
	}

	map,.mapBox{
	  width: 750rpx;
	  height: 300rpx;
	}
</style>
